<!-- DOM案例整屏滚动 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #box {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: relative;
      }

      #nav {
        width: 120px;
        overflow: hidden;
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
      }

      #nav > span {
        float: left;
        width: 100%;
        height: 38px;
        text-align: center;
        line-height: 38px;
        margin: 5px 0;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
      }

      #nav > .active {
        background-color: #ff4100;
      }

      #wrap {
        width: 100%;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
      }

      .section {
        width: 100%;
        height: 100%;
        background-color: red;
      }

      .section:nth-child(2) {
        background-color: blue;
      }

      .section:nth-child(3) {
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <!-- 容器 -->
    <div id="box">
      <!-- 分页器的容器 -->
      <div id="nav">
        <!-- 分页器内容 -->
        <span class="active">第一页</span>
        <span>第二页</span>
        <span>第三页</span>
        <span>第四页</span>
        <span>第五页</span>
      </div>
      <!-- 每一屏的容器 -->
      <div id="wrap">
        <!-- 每一屏的元素 -->
        <div
          class="section"
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></div>
        <div
          class="section"
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></div>
        <div
          class="section"
          style="background: url(../img/img0.png) center center/cover no-repeat"
        ></div>
        <div
          class="section"
          style="
            background: url(../img/myimg.jpeg) center center/cover no-repeat;
          "
        ></div>
        <div
          class="section"
          style="
            background: url(../img/ico_star_press1@2x.png) center center/cover
              no-repeat;
          "
        ></div>
      </div>
    </div>
    <script>
      //1、动态设置每一屏的高度
      //1-1、获取所需元素body的高度
      var bodyH = document.documentElement.offsetHeight;
      console.log(bodyH);
      //1-2、获取所需元素
      function $(str) {
        return document.getElementById(str);
      }
      var _nav = $("nav").children; //获取所需要的所有的span分页器
      var _section = $("wrap").children; //获取所需要的每一屏的div
      //1-3、给wrap设置高度
      $("wrap").style.height = bodyH + "px";
      //2、给document绑定滚轮事件
      var f = window.navigator.userAgent.indexOf("Firefox"); //火狐浏览器
      //2-1、写兼容
      if (f != -1) {
        console.log("aaa");
        document.addEventListener("DOMMouseScroll", scrollFun, false);
      } else {
        console.log("bbbb");
        window.onmousewheel = document.onmousewheel = scrollFun;
      }
      //3、封装滚轮函数
      //IE/Chrome中:event.wheelDelta 表示滚轮方向。
      //FireFox中：event.detail 表示滚轮方向。
      /*
			规律1.IE和Chrome：
			    滚轮向上滚，event.wheelDelta的值为正。
			    滚轮向下滚，event.wheelDelta的值为负。
			规律2.火狐：
			    滚轮向上滚，event.detail的值为负。
			    滚轮向下滚，event.detail的值为正。
			*/
      function scrollFun(ev) {
        var ev = ev || window.event;
        if (ev.detail) {
          //火狐
          console.log("cccc");
          if (ev.detail < 0) {
            //向上滚
            scrollUP();
          }
          if (ev.detail > 0) {
            //向下滚
            scrollDown();
          }
        } else if (ev.wheelDelta) {
          console.log("dddd");
          if (ev.wheelDelta < 0) {
            //向下滚
            scrollDown();
          }
          if (ev.wheelDelta > 0) {
            //向上滚
            scrollUP();
          }
        }
      }
      //4、封装滚动方向函数
      var _index = 0; //每一屏的索引
      var n = 1; //控制滚动次数
      var time = null; //控制滚动次数
      var timer = null; //控制动画开关
      var flg = false; //控制滚轮开关(防止滚动中滚轮次数多次执行)
      //4-1、封装向上滚动
      function scrollUP() {
        if (n < 1) {
          clearInterval(time);
          time = setInterval(function () {
            n++;
          }, 100);
        } else if (!flg) {
          flg = true;
          _index--;
          if (_index < 0) {
            _index = 0;
          }
          //调用运动过程
          move();
        }
      }
      //4-2、封装向下滚动
      function scrollDown() {
        if (n < 1) {
          clearInterval(time);
          time = setInterval(function () {
            n++;
          }, 100);
        } else if (!flg) {
          flg = true;
          _index++;
          if (_index > _section.length - 1) {
            _index = _section.length - 1;
          }
          //调用运动过程
          move();
        }
      }
      //4-3、封装运动函数
      function move() {
        //起始位置
        var start = $("wrap").scrollTop;
        //结束位置
        var _end = _section[0].offsetHeight * _index;
        //运动范围
        var cha = _end - start;
        var minspeed = 0;
        var maxspeed = 30;
        var change = cha / (maxspeed - minspeed);
        clearInterval(time);
        clearInterval(timer);
        timer = setInterval(function () {
          minspeed++;
          if (minspeed >= maxspeed) {
            minspeed = maxspeed;
            clearInterval(timer);
          }
          start += change;
          //赋值
          $("wrap").scrollTop = start;
        }, 30);
        //绑定分页器
        for (var i = 0; i < _nav.length; i++) {
          _nav[i].className = "";
        }
        //分页器的选中状态
        _nav[_index].className = "active";
        //复位
        n = 0;
        flg = false;
      }
      //分页器的绑定
      for (var i = 0; i < _nav.length; i++) {
        _nav[i].index = i;
        _nav[i].onclick = function () {
          _index = this.index;
          move();
        };
      }
    </script>
  </body>
</html>
